<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.js"></script>
  <script src="js/china.js"></script>
</head>
<body>
<div id="box3-2" style="width: 600px; height: 400px"></div>
</body>
<script>
  var box3_2 = echarts.init(document.getElementById('box3-2'))
  var xdata=["2018/1/1", "2018/2/1", "2018/3/1", "2018/4/1", "2018/5/1", "2018/6/1", "2018/7/1", "2018/8/1", "2018/9/1", "2018/10/1", "2018/11/1", "2018/12/1", "2019/1/1", "2019/2/1", "2019/3/1", "2019/4/1", "2019/5/1", "2019/6/1", "2019/7/1", "2019/8/1", "2019/9/1", "2019/10/1", "2019/11/1", "2019/12/1", "2020/1/1", "2020/2/1", "2020/3/1", "2020/4/1", "2020/5/1", "2020/6/1", "2020/7/1", "2020/8/1", "2020/9/1", "2020/10/1", "2020/11/1", "2020/12/1", "2021/1/1", "2021/2/1", "2021/3/1", "2021/4/1", "2021/5/1", "2021/6/1", "2021/7/1", "2021/8/1", "2021/9/1", "2021/10/1", "2021/11/1", "2021/12/1", "2022/1/1", "2022/2/1", "2022/3/1", "2022/4/1", "2022/5/1", "2022/6/1", "2022/7/1", "2022/8/1", "2022/9/1", "2022/10/1", "2022/11/1", "2022/12/1", "2023/1/1", "2023/2/1", "2023/3/1", "2023/4/1", "2023/5/1", "2023/6/1", "2023/7/1", "2023/8/1", "2023/9/1", "2023/10/1", "2023/11/1"]
  var KSMC = [100.6, 101.2,98.9, 99.8, 99.8, 99.9, 100.3, 100.7, 100.7, 100.2, 99.7, 100, 100.5, 101, 99.6, 100.1, 100, 99.9, 100.4, 100.7, 100.9, 100.9, 100.4, 100, 101.4, 100.8, 98.8, 99.1, 99.2, 99.9, 100.6, 100.4, 100.2, 99.7, 99.4, 100.7, 101, 100.6, 99.5, 99.7, 99.8, 99.6, 100.3, 100.1, 100, 100.7, 100.4, 99.7, 100.4, 100.6, 100, 100.4, 99.8, 100, 100.5, 99.9, 100.3, 100.1, 99.8, 100, 100.8, 99.5, 99.7, 99.9, 99.8, 99.8, 100.2, 100.3, 100.2, 99.9, 99.5,]
  var KSMC1 = [100.9, 101.9,98, 99.9, 99.8, 99.9, 100.9, 100.9, 100.7, 100.2, 99.7, 100, 100.5, 101, 99.6, 100.1, 100, 99.9, 100.4, 100.7, 100.9, 100.9, 100.4, 100, 101.4, 100.8, 98.8, 99.1, 99.2, 99.9, 100.6, 100.4, 100.2, 99.7, 99.4, 100.7, 101, 100.6, 99.5, 99.7, 99.8, 99.6, 100.3, 100.1, 100, 100.7, 100.4, 99.7, 100.4, 100.6, 100, 100.4, 99.8, 100, 100.5, 99.9, 100.3, 100.1, 99.8, 100, 100.8, 99.5, 99.7, 99.9, 99.8, 99.8, 100.2, 100.3, 100.2, 99.9, 99.5,]
  var option = {
    color: ['#3398DB','#2525a5'],
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    yAxis: [
      {
        type: 'value',
        min:98,
        max:102,
      }
    ],
    dataZoom: [//滑动条
      {
        xAxisIndex: 0,
        show: false,
        type: 'slider',
        startValue: 0,
        endValue: 6
      },
        {
            xAxisIndex: 0,
            show: false,
            type: 'slider',
            startValue: 0,
            endValue: 6
        }
    ],
    xAxis: [
      {
        type: 'category',
        inverse:false,
          axisLabel:{
              fontSize:10,
          },
        data:xdata,
      }
    ],
    series: [
        {
            name: '',
            type: 'line',
            data: KSMC,
        },

        {
            name: '直接访问1',
            type: 'line',
            data: KSMC1
        }
    ]
  };
  box3_2.setOption(option);

  setInterval(function () {

    if (option.dataZoom[0].endValue == KSMC.length ) {
      option.dataZoom[0].endValue = 6;
      option.dataZoom[0].startValue = 0;
    }
    else {
      option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
      option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
    }
    box3_2.setOption(option);
  }, 2000);
</script>
</html>